<!-- 
  @name: 售后记录
  @date: 2020.4.2
 -->
<template>
	<view class="content">
		<!-- 筛选区域-公共记录时显示 -->
		<view class="topview fixed_top" v-if="!isMacRec && lists.length > 0">
			<view class="select_btn" @tap="typeSel = !typeSel">
				<view class="_text">{{macTypeText}}</view>
				<view class="_icon" :class="typeSel ? 'up' : 'down'"></view>
			</view>
			<view class="input">
				<input class="int" placeholder="输入出厂编码" placeholder-class="phcolor" v-model.trim="keyword" />
			</view>
			<view class="btn" @tap="search">搜索</view>
		</view>
		
		<!-- 筛选 -->
		<view class="_popup" v-show="typeSel" @tap="typeSel = false"></view>
		<view class="select_popup" v-show="typeSel">
			<view
				class="_btn"
				v-for="(item, index) in typeList"
				:key="index"
				:class="macType === item.dictValue ? 'sl' : ''"
				@tap="chooseType(item, index)">
				{{item.dictName}}
			</view>
		</view>
		
		<!-- 列表 -->
		<view class="listview" :class="isMacRec ? '' : 'h2'" v-if="lists.length > 0">
			<view
				class="item"
				v-for="(item, index) in lists"
				:key="item.repairId"
				@tap="$navigateTo('./details?repairId=' + item.repairId)">
				<view class="line">
					<text class="left code">{{item.macCode}}</text>
					<text class="time">{{item.repairTime}}</text>
				</view>
				<view class="line l2">
					<text class="left">设备型号</text>
					<text>{{item.macType}}</text>
				</view>
				<view class="line l3">
					<text class="left">维修人员</text>
					<text>{{item.repairName}}</text>
				</view>
			</view>
			<!-- 底部加载提示 -->
			<btm-load></btm-load>
		</view>
		
		<!-- 没有数据时 -->
		<view class="no_lists" v-if="lists.length === 0">
			<view class="img"></view>
			<view class="tip">暂无售后记录</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',  //关键字(机器码)
				isMacRec: false,  //是否为某个机器详情页进入的售后记录
				lists: [],  //列表
				page: 1,  //页码
				typeSel: false,  //型号筛选
				macType: -1,  //选中的型号
				macTypeText: '设备型号',  //型号名
				typeList: [],  //型号列表
			}
		},
		onLoad(e) {
			if(e.macCode) {
				this.isMacRec = true;
				this.keyword = e.macCode;
			} else {
				this.getTypeList();
			}
			this.getList();
		},
		onShow() {
			if(this.$store.state.reLogin) {
				this.search();
				this.$store.commit('hasLogin');
			}
		},
		onReachBottom() {
			this.$store.commit('btmLoad', true);
			this.getList();
		},
		onPullDownRefresh() {
			this.search();
		},
		methods: {
			//搜索
			search() {
				this.macType = -1;
				this.macTypeText = '设备型号';
				this.hasSelect();
			},
			//筛选后
			hasSelect() {
				this.lists = [];
				this.page = 1;
				this.getList();
			},
			//选择型号
			chooseType(item, index) {
				if(this.macType !== item.dictValue) {
					let text = item.dictValue === -1 ? '设备型号' : item.dictName;
					text = (text.length > 5) ? (text.substr(0,4) + '...') : text;
					this.macType = item.dictValue;
					this.macTypeText = text;
					this.typeSel = false;
					this.hasSelect();
				}
			},
			//获取型号
			getTypeList() {
				this.$http({
					url: this.$api.userUrl + 'getdictlist',
					data: {
						dictKey: 'MacType'
					}
				}).then(res => {
					this.typeList = [{
						dictName: "全部",
						dictValue: -1
					}];
					this.typeList = this.typeList.concat(res);
				});
			},
			//获取列表
			getList() {
				this.$http({
					url: this.$api.factoryUrl + 'getdevicerepairpage',
					data: {
						macType: this.macType < 0 ? '' : this.macType,
						keyword: this.keyword,
						page: this.page,
						rows: this.$tmp.ROWS_RET
					},
					loading: this.page > 1 ? 0 : ''
				}).then(res => {
					let arr = res;
					if(arr && arr.length > 0) {
						this.lists = this.lists.concat(arr);
						this.page += 1;
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	/* 筛选区域 */
	.topview {
		width: 750rpx;
		height: 120rpx;
		padding-left: 40rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: $color-primary;
		.input {
			width: 400rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			text-align: center;
			margin-left: 46rpx;
			padding: 0 20rpx;
			border-radius: 30rpx;
			background-color: $color-white;
			.int {
				flex: 1;
				font-size: 24rpx;
			}
		}
		.btn {
			margin-left: 25rpx;
			color: $color-white;
			font-size: 24rpx;
		}
	}
	._popup,
	.select_popup {
		top: 120rpx;
	}
	
	/* 列表 */
	.listview.h2 {
		margin-top: 120rpx;
	}
	.listview {
		width: 750rpx;
		margin-bottom: 15rpx;
		padding: 0 10rpx;
		.item {
			width: 100%;
			padding: 30rpx;
			margin-top: $spacing-col;
			display: flex;
			flex-direction: column;
			justify-content: center;
			background-color: $color-white;
			border-radius: $border-radius-bm;
			.line.l2 {
				margin-top: 35rpx;
			}
			.line.l3 {
				margin-top: 25rpx;
			}
			.line {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				font-size: 24rpx;
				.left {
					flex: 1;
				}
				.code {
					font-size: 32rpx;
					font-family: $font-family-num;
				}
				.time {
					color: $color-grey;
					font-family: $font-family-num;
				}
			}
		}
	}
	
	/* 没有数据时 */
	.no_lists {
		height: 100vh;
		background-color: $color-white;
		.img {
			width: 260rpx;
			height: 276rpx;
			background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16FttCASimjAAB5wUKuXik374.png');
		}
	}
	
</style>
